<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
        <title>
            阳光成单系统
        </title>
        
         <link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
         <script src="../../js/layui/layui.js"></script>
         <style>
/* .layui-table-cell {
	height: 100px;
	width: 100px;
	max-width: 100%;
} */
</style>
    </head>
    <body>
	<!-- 添加表单 -->
	<form class="layui-form" action="" style="display:none;" id="addForm">
		<div class="layui-inline">
			<label class="layui-form-label">时间</label>
			<div class="layui-input-inline">
				<input type="text" name="order_time" id="order_time" lay-verify="date"
					placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品名称</label>
			<div class="layui-input-inline">
				<input type="text" name="order_product_id" lay-verify="required"
					lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">顾客名称</label>
			<div class="layui-input-inline">
				<input type="text" name="order_user_id" lay-verify="required"
					lay-reqtext="" placeholder="请输入" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">顾客收货地址</label>
			<div class="layui-input-inline">
				<input type="text" name="order_address_id" lay-verify="required"
					lay-reqtext="" placeholder="请输入" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item" style="display:none;">
			<label class="layui-form-label">订单状态</label>
			<div class="layui-input-inline"
				style="width: 120px; text-align: left">
				<select name="order_state">
					<option value=""></option>
					<option value="未发货" selected="">未发货</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-inline">
				<button type="submit" class="layui-btn" lay-submit=""
					lay-filter="add">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>

	</form>


	<!-- 修改表单 -->
	     <form class="layui-form"  action="" id="updateForm" lay-filter="updateForm" style="display:none; width: 600px">
	     <input name="order_id" type="hidden"/>
		  <div class="layui-form-it">
    <label class="layui-form-label">物流单号</label>
    <div class="layui-input-inline">
      <input type="text" name="order_on" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  
    <div class="layui-form-item">
         <label class="layui-form-label">物流公司</label>
    <div class="layui-input-inline">
      <select  name="order_ship" class="getType">
        <option value=""></option>
        <option value="京东物流">京东物流</option>
        <option value="顺丰速运">顺丰速运</option>
        <option value="百世汇通">百世汇通</option>
        <option value="中通快递">中通快递</option>
        <option value="申通快递">申通快递</option>
        <option value="韵达快递">韵达快递</option>
        <option value="圆通快递">圆通快递</option>
        <option value="邮政快递">邮政快递</option>
        <option value="极兔快递">极兔快递</option>
      </select>
    </div>
    </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">运费</label>
    <div class="layui-input-inline">
      <input type="text" name="order_money" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item" style="display:none;">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
      <select name="order_state" lay-verify="required">
        <option value="已发货" selected="">已发货</option>
         <option value="未发货">未发货</option>
      </select>
    </div>
  </div>

 

    
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="update">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
    
    <!-- 多条件分页查询 -->
        <div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>产品管理</cite></a>
              <a><cite>商品管理</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
        </div>
        <div class="x-body">
            <form class="layui-form x-center" action="" style="width:100%">
                <div class="layui-form-pane" style="margin-top: 15px;">
                  <div class="layui-form-item">
                  
                  <label class="layui-form-label">订单状态</label>
                    <div class="layui-input-inline" style="width:120px;text-align: left">
                        <select id="order_state">
                           	<option value=""></option>
                            <option value="已发货">已发货</option>
                            <option value="未发货">未发货</option>
                        </select>
                    </div>
                    
                    <label class="layui-form-label">商品名：</label>
                    <div class="layui-input-inline" style="width:120px">
                        <input type="text" id="product_name"  placeholder="" autocomplete="off" class="layui-input">
                    </div>
                     <label class="layui-form-label">订单编号</label>
                    <div class="layui-input-inline" style="width:120px">
                        <input type="text" id="order_on"  placeholder="" autocomplete="off" class="layui-input">
                    </div>
                     <label class="layui-form-label">收货电话</label>
                    <div class="layui-input-inline" style="width:120px">
                        <input type="text" id="address_phone"  placeholder="" autocomplete="off" class="layui-input">
                    </div>
                     </div>
                    <div class="layui-form-item">
                    
                     <label class="layui-form-label">收货姓名</label>
                    <div class="layui-input-inline" style="width:120px">
                        <input type="text" id="address_username"  placeholder="" autocomplete="off" class="layui-input">
                    </div>
                    <label class="layui-form-label">订单时间</label>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" id="begin_order_time"
							autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" id="end_order_time"
							autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width:80px">
                        <button class="layui-btn"  lay-submit="" lay-filter="chaxun"><i>&#xe608;</i>查询</button>
                    </div>
         <!--            <div class="layui-input-inline" style="width:80px">
                        <button class="layui-btn"  lay-submit="" lay-filter="addBtn"><i class="layui-icon">&#xe608;</i>增加</button>
                    </div> -->
                  </div>
                </div> 
            </form>
            <xblock><button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon">&#xe640;</i>批量删除</button><span class="x-right" style="line-height:40px">共有数据：88 条</span></xblock>
            
            <!-- 数据表格 -->
            <table id="demo" lay-filter="test"></table>
     <script type="text/html" id="statusTpl" >
        <!--这里的 d 和上面的是一样的，表示当前行数据-->
        <input type="checkbox" lay-skin="switch"  value={{d.product_id}}  lay-filter="switchTest"  lay-text="是|否" {{ d.id== "0" ? "checked" : "" }}>
    </script>
        </div>
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script src="./js/x-layui.js" charset="utf-8"></script>
	<script>
            layui.use(['layer','form','table','upload','laydate'], function(){
             var   $ = layui.$,//jquery
              layer = layui.layer,//弹出层
              form = layui.form,
			  table = layui.table,
			  upload = layui.upload,
			  laydate = layui.laydate;
              
              table.render({
            	    elem: '#demo'
            	    ,url: '../../order_ViewAll' //数据接口
            	    ,id:'idTest'
            	    ,page: true //开启分页
            	    ,cols: [[ //表头
            	    	{checkbox: true, fixed: true}
            	     , {field: 'order_id', title: 'ID',sort: true, fixed: 'left'}
            	      ,{field: 'order_time', title: '时间'}
            	      ,{field: 'order_ship', title: '发货方式'}
            	      ,{field: 'order_money', title: '费用'}
            	      ,{field: 'product_name', title: '商品名称'}
            	      ,{field: 'address_username', title: '收货人'}
            	      ,{field: 'address_phone', title: '收货人手机号'}
            	      ,{field: 'order_on', title: '订单号'}
            	      ,{field: 'order_state', title: '订单状态'}
            	      ,{fixed: 'right', width:180, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            	       ]]
            	  });
            /*   //动态获取下拉框数据
              $.post("../../productTypeType",{},function(res){
            	  for (var i = 0; i < res.length; i++) {
					$(".getType").append(`<option value="${res[i].t_id}">${res[i].t_name}</option>`)					
				}
            	  form.render("select");
              },"json"); */
              
              //监听查询
              form.on('submit(chaxun)', function(data){
            	  table.reload('idTest', {
            		  url: '../../order_ViewAll'
            		  ,where: {
            			  order_state:$("#order_state").val(),
            			  product_name:$("#product_name").val(),
            			  order_on:$("#order_on").val(),
            			  address_phone:$("#address_phone").val(),
            			  address_username:$("#address_username").val(),
            			  begin_order_time:$("#begin_order_time").val(),
            			  end_order_time:$("#end_order_time").val()
            		  } //设定异步数据接口的额外参数
            		  //,height: 300
            		});
                return false;
              });
			//开关事件
			


							//工具条事件
							table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
								var data = obj.data; //获得当前行数据
								var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
								var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
									
								if (layEvent === 'detail') { //查看
									//do somehing
								} else if (layEvent === 'del') { //删除

								} else if (layEvent === 'edit') { //编辑
									if(data.order_state!="已发货"){
										form.val("updateForm", data);
										layer.open({
											type : 1,
											content : $("#updateForm")
										})
									}else {
										layer.msg('该订单已发货', {
											icon : 1
										});
									}
								}
							});

		form.on('submit(update)', function(data) {
				$.post("../../orderUpdate", $("#updateForm").serialize(), function(res) {
					if (res.code == "0") {
						layer.closeAll();
						layer.msg('已发货', {
							icon : 1
						});
						table.reload("idTest");
					} else {
						layer.msg('修改失败', {
							icon : 2
						});
					}
				}, "json");
			return false;
		});
							
			 		/* form.on('submit(add)', function(data) {
								$.post("../../orderAdd", $("#addForm")
										.serialize(), function(res) {
									if (res.code == "0") {
										layer.closeAll();
										layer.msg('添加成功', {
											icon : 1
										});
										table.reload("idTest");
									} else {
										layer.msg('添加失败', {
											icon : 2
										});
									}
								}, "json");
								return false;
							}); */

						
					form.on('submit(add)', function(data) {
								$.post("../../orderAdd", $("#addForm")
										.serialize(), function(res) {
									if (res.code == "0") {
										layer.closeAll();
										layer.msg('添加成功', {
											icon : 1
										});
										table.reload("idTest");
									} else {
										layer.msg('添加失败', {
											icon : 2
										});
									}
								}, "json");
								return false;
							});
							form.on('submit(addBtn)', function(data) {
								layer.open({
									type : 1,
									content : $("#addForm"),
								})
								return false;
							});

							//日期时间选择器
							laydate.render({
								elem : '#date1',
								type : 'datetime'
							});
							laydate.render({
								elem : '#date2',
								type : 'datetime'
							});

							//批量删除提交
							function delAll() {
								layer.confirm('确认要删除吗？', function(index) {
									//捉到所有被选中的，发异步进行删除
									layer.msg('删除成功', {
										icon : 1
									});
								});
							}
							laydate.render({
								elem : '#begin_order_time' //指定元素
							});
							laydate.render({
								elem : '#end_order_time' //指定元素
							});
							laydate.render({
								elem : '#order_time' //指定元素
							});

						})
	</script>
	<script type="text/html" id="barDemo">
  
  <a class="layui-btn layui-btn-xs" lay-event="edit">发货</a>
  
</script>
</body>
</html>